<template>
	<view style="padding: 10%;">

		<uni-section title="绑定邮箱 " type="line">

			<view>

				<view>
					<uni-section title="邮箱"><uni-easyinput v-model="emailInfo.email"
							placeholder="请输入邮箱"></uni-easyinput>
					</uni-section>

					<uni-section title="验证码">
						<view class="input-with-button">
							<uni-easyinput v-model="emailInfo.code" placeholder="请输入验证码" />
							<button @click="sendVerificationCode1" :disabled="isCountingDown" size="mini">
								{{ isCountingDown ? `${countdown}秒后重新发送` : '发送验证码' }}
							</button>
						</view>
					</uni-section>

					<uni-section title="登录密码"><uni-easyinput type="password" v-model="emailInfo.password"
							placeholder="请输入登录密码"></uni-easyinput>
					</uni-section>

					<view class="button-container">
						<button @click="email" type="primary" size="mini" class="zhuce-button">绑定</button>
						<button @click="reset" type="warn" size="mini" class="reset-button">重置</button>
					</view>

				</view>

			</view>
		</uni-section>

	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		onBeforeUnmount
	} from 'vue';
	import {
		api,
		tools
	} from '../../api/api.js';
	import userstore from '../../store/user.js';
	import {
		storeToRefs
	} from 'pinia';

	const emailInfo = ref({
		email: '',
		password: '',
		code: ''
	})

	const reset = () => {
		emailInfo.value = {
			email: '',
			password: '',
			code: ''
		};
	};

	const {
		update
	} = userstore();


	const isCountingDown = ref(false);
	const countdown = ref(60);

	const startCountdown = () => {
		isCountingDown.value = true;
		const timer = setInterval(() => {
			countdown.value--;
			if (countdown.value <= 0) {
				clearInterval(timer);
				isCountingDown.value = false;
				countdown.value = 60;
			}
		}, 1000);
	};

	const sendVerificationCode1 = () => {
		if (!isCountingDown.value) {
			api.post('/tools/sendMailCode', {
				email: emailInfo.value.email
			}, (data) => {
				if (data.success) {
					uni.showToast({
						title: '验证码已发送',
						icon: 'success'
					});
					startCountdown();
				} else {
					uni.showToast({
						title: data.message,
						icon: 'none'
					});
				}
			});
		}
	};

	const email = () => {
		api.patch('/user/email', emailInfo.value, (data) => {
			if (data.success) {
				uni.showToast({
					title: data.message,
					icon: 'none'
				});
			} else {
				uni.showToast({
					title: data.message,
					icon: 'none'
				});
			}
		});
	};
</script>

<style>
	.input-with-button {
		display: flex;
		align-items: center;
	}

	.button-container {
		display: flex;
		justify-content: space-between;
	}

	.zhuce-button {
		width: 48%;
		background-color: #007bff;
		color: #ffffff;
		border: none;
		border-radius: 4px;
		font-size: 14px;
		transition: background-color 0.3s;
		margin-top: 10%;
	}

	.reset-button {
		width: 48%;
		background-color: #dc3545;
		color: #ffffff;
		border: none;
		border-radius: 4px;
		font-size: 14px;
		transition: background-color 0.3s;
		margin-top: 10%;
	}
</style>